<template>
    <view class="condition-page">
      <!-- 顶部就诊人信息卡 -->
      <view class="user-card">
        <image class="avatar" :src="user.avatar" />
        <view class="user-info">
          <view class="user-name">{{ user.name }}</view>
          <view class="user-id">{{ user.idMasked }}</view>
        </view>
        <view class="switch-user" @click="switchUser">
          <image class="switch-icon" src="/static/images/icon/switchUser-icon.png" />
          <view style="font-size: 20rpx;">切换就诊人</view>
        </view>
      </view>
  
      <!-- 上次就诊情况 -->
      <view class="section-card">
        <view class="title-container">
          <view class="section-title">上次就诊情况</view>
          <view class="title-bg"></view>
        </view>
        <view class="form-row">
          <view class="form-label">上次就诊院区</view>
          <input class="form-input" v-model="form.lastHospital" placeholder="请输入" />
        </view>
        <view class="form-row">
          <view class="form-label">上次就诊科室</view>
          <view class="form-value">心血管内科</view>
        </view>
        <view class="form-row">
          <view class="form-label">就诊时间</view>
          <view class="form-select">
            <picker mode="date" :value="form.lastDate" @change="onDateChange">
              <view class="form-input">{{ form.lastDate || '请选择' }}</view>
            </picker>
            <u-icon  name="arrow-right" color="#bbb" style="margin-top: 2rpx;"></u-icon>
          </view>
        </view>
        <view class="form-row no-border">
          <view class="form-label">上次诊断结果</view>
        </view>
        <textarea class="textarea result" v-model="form.lastResult" placeholder="请输入" />
      </view>
  
      <!-- 病情描述 -->
      <view class="section-card">
        <view class="title-container">
          <view class="section-title">病情描述</view>
          <view class="title-bg"></view>
        </view>
        <textarea class="textarea" v-model="form.conditionDesc" placeholder="请输入" maxlength="200" />
        <view class="textarea-count">{{ form.conditionDesc.length }}/200</view>
      </view>
  
      <!-- 相关病历资料上传 -->
      <view class="section-card">
        <view class="bingli-header">
          <view class="title-container">
            <view class="section-title">相关病历资料</view>
            <view class="title-bg"></view>
          </view>
          <text class="section-tip">（上传相关病历仅自己与医生可见）</text>
        </view>
        <u-upload
          ref="upLoad"
          :action="action"
          :file-list="fileList"
          max-count="9"
          @on-success="onUploadSuccess">
        </u-upload>
        <view class="img-tip">
          （可上传病历、医嘱、入院单、出院单、检验检查结果、处方笺、患处照片等，最多可以上传9张）
        </view>
      </view>
  
      <!-- 其他情况 -->
      <view class="section-card">
        <view class="title-container">
          <view class="section-title">其他情况</view>
          <view class="title-bg"></view>
        </view>
        <view class="radio-group">
          <view :class="form.pastHistory == '无'? 'radio-row' : 'radio-row no-border'">
            <view class="radio-label">既往史</view>
            <u-radio-group v-model="form.pastHistory">
              <u-radio :name="'无'">无</u-radio>
              <u-radio :name="'有'">有</u-radio>
            </u-radio-group>
          </view>
          <view v-if="form.pastHistory === '有'" class="radio-input-row">
            <textarea class="radio-input" v-model="form.pastHistoryDetail" placeholder="请填写曾经患病情况及慢性病患情况（如高血压、糖尿病等）" maxlength="500" />
            <view class="textarea-count">{{ form.pastHistoryDetail.length }}/500</view>
          </view>

          <view :class="form.allergyHistory == '无'? 'radio-row' : 'radio-row no-border'">
            <view class="radio-label">过敏史</view>
            <u-radio-group v-model="form.allergyHistory">
              <u-radio :name="'无'">无</u-radio>
              <u-radio :name="'有'">有</u-radio>
            </u-radio-group>
          </view>
          <view v-if="form.allergyHistory === '有'" class="radio-input-row">
            <textarea class="radio-input" v-model="form.allergyHistoryDetail" placeholder="请填写过往药物或其它过敏情况" maxlength="500" />
            <view class="textarea-count">{{ form.allergyHistoryDetail.length }}/500</view>
          </view>

          <view :class="form.familyHistory == '无'? 'radio-row' : 'radio-row no-border'">
            <view class="radio-label">家族史</view>
            <u-radio-group v-model="form.familyHistory">
              <u-radio :name="'无'">无</u-radio>
              <u-radio :name="'有'">有</u-radio>
            </u-radio-group>
          </view>
          <view v-if="form.familyHistory === '有'" class="radio-input-row">
            <textarea class="radio-input" v-model="form.familyHistoryDetail" placeholder="请填写直系亲属的遗传病患病情况" maxlength="500" />
            <view class="textarea-count">{{ form.familyHistoryDetail.length }}/500</view>
          </view>
        </view>
      </view>
  
      <!-- 授权勾选 -->
      <view class="auth-row">
        <checkbox v-model="form.auth" class="auth-checkbox" />
        <text class="auth-text">授权本院获取病情描述和图片并提供相关服务</text>
        <text class="auth-link">《用户须知》</text>
      </view>
  
      <!-- 下一步按钮 -->
      <button class="next-btn" @click="nextStep">下一步</button>
    </view>
  </template>
  
  <script>
  import { mapGetters } from 'vuex';
  export default {
    computed: {
			...mapGetters([
				'hostApi'
			]),
      action(){
        return this.hostApi + '/upload/bingliInfo'
      }
		},
    data() {
      return {
        user: {
          avatar: '/static/images/patient/user-avatar.jpg',
          name: '王依依',
          idMasked: '511**************5647',
        },
        form: {
          lastHospital: '',
          lastDept: '心血管内科',
          lastDate: '',
          lastResult: '',
          conditionDesc: '',
          medicalImages: [],
          pastHistory: '有',
          allergyHistory: '无',
          familyHistory: '无',
          auth: true,
          pastHistoryDetail: '',
          allergyHistoryDetail: '',
          familyHistoryDetail: '',
        },
				fileList: []
      }
    },
    methods: {
      switchUser() {
        // 切换就诊人逻辑
      },
      onDateChange(e) {
        // this.form.lastDate = e.detail.value
      },
      uploadImage() {
        // 上传图片逻辑
      },
      onUploadSuccess(data, index, lists) {
        console.log('上传成功:', data); 
        if(data.result) {
          this.form.medicalImages.push(data.result);
        }
      },
      nextStep() {
        console.log(this.form,'2333');
        
      },
    },
  }
  </script>
  
  <style lang="scss" scoped>
  .condition-page {
    background: linear-gradient(#e0f3ff 0%, #fff 30%);
    min-height: 100vh;
    padding: 40rpx 30rpx 40rpx;
  }
  .user-card {
    display: flex;
    align-items: center;
    background: linear-gradient(90deg, #F0FEFF 0%, #b6e0f7 85%, #F0FEFF 100%);
    border-radius: 16rpx 16rpx 0 0;
    padding: 32rpx 40rpx 24rpx;
    position: relative;
  }
  .avatar {
    width: 88rpx;
    height: 88rpx;
    border-radius: 50%;
    margin-right: 24rpx;
  }
  .user-info {
    flex: 1;
  }
  .user-name {
    font-size: 32rpx;
    font-weight: bold;
    color: #222;
  }
  .user-id {
    font-size: 24rpx;
    color: #666;
    margin-top: 8rpx;
  }
  .switch-user {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 6rpx;
    color: #1ec6e6;
    font-size: 24rpx;
  }
  .switch-icon {
    width: 38rpx;
    height: 38rpx;
    margin-right: 8rpx;
  }
  .section-card {
    border-radius: 16rpx;
    padding: 24rpx 24rpx 6rpx 18rpx;
  }
  .bingli-header{
    display: flex;
  }
  .title-container {
    position: relative;
    margin-bottom: 18rpx;
  }
  .section-title {
    position: relative;
    font-size:28rpx;
    font-weight: bold;
    color: #333;
    z-index: 1;
  }
  .title-bg{
    position: absolute;
    width: 48rpx;
    height: 15rpx;
    background-color: rgba(65, 207, 230, 0.5);
    bottom: -2rpx;
    left: 36rpx;
    z-index:0
  }
  .section-tip {
    font-size: 22rpx;
    color: #888;
    padding-top: 6rpx;
  }
  .form-row.no-border{
    border-bottom: none !important;
    padding-bottom: 0; 
  }
  .form-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #f0f0f0;
    padding: 16rpx 6rpx;
    margin: 16rpx 0;
    font-size: 26rpx;
  }
  .form-label {
    width: 180rpx;
    color: #333;
  }
  .form-select{
    display: flex;
  }
  .form-input {
    flex: 1;
    color: #bbb;
    text-align: right;
    font-size: 26rpx;
  }
  .form-value {
    flex: 1;
    color: #333;
    text-align: right;
    font-size: 26rpx;
  }
  .textarea.result{
    height: 150rpx;
  }
  .textarea {
    width: 94%;
    background: #f5f9ff;
    border-radius: 12rpx;
    margin: 0 18rpx;
    padding: 18rpx;
    font-size: 26rpx;
    color: #333;
    margin-top: 8rpx;
    border: none;
  }
  .textarea-count {
    text-align: right;
    color: #bbb;
    font-size: 22rpx;
    margin-top: 4rpx;
  }
  .img-list {
    display: flex;
    margin-top: 8rpx;
  }
  .img-item {
    margin-right: 16rpx;
    margin-bottom: 16rpx;
  }
  .img-thumb {
    width: 120rpx;
    height: 120rpx;
    border-radius: 8rpx;
    object-fit: cover;
  }
  .img-upload {
    width: 120rpx;
    height: 120rpx;
    background: #f5f9ff;
    border: 1px dashed #b6e0f7;
    border-radius: 8rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #bbb;
    font-size: 60rpx;
  }
  .plus {
    font-size: 60rpx;
    color: #bbb;
  }
  .img-tip {
    color: #e74c3c;
    font-size: 22rpx;
    margin-top: 8rpx;
  }
  .radio-group {
    margin: 8rpx 8rpx 0;
    padding: 0 20rpx;
    background: #fff;
    border-radius: 16rpx;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
    border: 1px solid #f0f0f0;
  }
  .radio-row.no-border{
    border-bottom: none !important;
    padding-bottom: 0; 
  }
  .radio-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #f0f0f0;
    padding: 16rpx 6rpx;
    font-size: 26rpx;
  }
  .radio-label {
    width: 120rpx;
    color: #333;
    font-size: 26rpx;
  }
  .radio-item {
    margin-right: 32rpx;
    font-size: 26rpx;
    color: #333;
    
    radio {
      transform: scale(0.8);
      margin-right: 8rpx;
    }
  }
  .radio-input-row {
    margin: 12rpx 0 24rpx 0;
  }
  .radio-input {
    width: 96%;
    height: 150rpx;
    background: #f5f9ff;
    border-radius: 8rpx;
    padding: 16rpx;
    font-size: 26rpx;
    border: none;
  }
  .auth-row {
    display: flex;
    margin: 12rpx 24rpx 0 24rpx;
  }
  .auth-checkbox {
    transform: scale(0.6);
  }
  .auth-text {
    color: #666;
    font-size: 22rpx;
    margin-top: 6rpx;
  }
  .auth-link {
    color: #1ec6e6;
    font-size: 22rpx;
    margin-left: 8rpx;
    text-decoration: underline;
    margin-top: 6rpx;
  }
  .next-btn {
    width: 90%;
    margin: 40rpx 5% 0 5%;
    height: 88rpx;
    background: linear-gradient(90deg, #6ed6f7 0%, #3ec6e7 100%);
    color: #fff;
    font-size: 32rpx;
    border-radius: 44rpx;
    text-align: center;
    line-height: 88rpx;
    box-shadow: 0 4rpx 12rpx rgba(65, 207, 230, 0.15);
    border: none;
  }
  </style>
  